<template>
	<view class="warp">
		<!-- #ifdef APP-PLUS -->
		<status-bar />
		<!-- #endif -->

		<!-- banner -->
		<unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
			field="_id,bannerfile,open_url,title" @load="onqueryload">
			<!-- 当无banner数据时显示占位图 -->
			<image v-if="!(loading||data.length)" class="banner-image" src="/static/grid/empty.png" mode="aspectFill"
				:draggable="false" />
			<uni-swiper-dot v-else class="uni-swiper-dot-box" @clickItem="clickItem" :info="data" :current="current"
				field="content">
				<swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in data" :key="item._id">
						<view class="swiper-item" @click="clickBannerItem(item)">
							<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill"
								:draggable="false" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</unicloud-db>



		<view class="example-body">
			<uni-grid :column="2" :highlight="true" @change="change">
				<template v-for="(item,i) in gridList">
					<uni-grid-item :index="i" :key="i">
						<view class="grid-item-box" style="background-color: #fff;">
							<image :src="'/static/grid/c'+(i+1)+'.png'" class="image" mode="aspectFill" />
							<text class="text">{{item.name}}</text>
						</view>
					</uni-grid-item>
				</template>
			</uni-grid>

			<uni-grid :column="4" :highlight="true" @change="changesub">
				<template v-for="(item,i) in list">
					<uni-grid-item :key="i" :index="i">
						<view class="grid-item-box" style="background-color: #fff;">
							<image :src="'/static/grid/c'+(i+1)+'.png'" class="image" mode="aspectFill" />
							<text class="text">{{item.name}}</text>
						</view>

					</uni-grid-item>
				</template>

			</uni-grid>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	export default {
		components: {
			statusBar
		},
		data() {
			return {
				list: [],
				gridList: [],
				current: 0,
				swiperDotIndex: 0
			}
		},
		computed: {
			...mapGetters({
				hasLogin: 'user/hasLogin'
			})
		},
		onLoad() {
			let gridList = []
			gridList.push({
				name: "预约取件",
				path: "/pages/core/booking/booking"
			})
			gridList.push({
				name: "订单管理",
				path: "/pages/core/orderlist/index"
			})
			this.list.push({
				icon: 'photo',
				name: "签到",
				path: "/pages/core/signin/signin"
			})
			this.list.push({
				icon: 'photo',
				name: "渝课表",
				path: "/pages/ucenter/settings/settings"
			})
			this.list.push({
				icon: 'photo',
				name: "重科闲转",
				path: "/pages/ucenter/settings/settings"
			})

			this.list.push({
				icon: 'photo',
				name: "新年限定",
				path: "/pages/core/sentence/sentence"
			})	
		
			this.gridList = gridList
		},
		methods: {
			click(name) {
				// this.$refs.uToast.success(`点击了第${name}个`)
			},

			changesub(e) {
				if (e.detail.index == 1) {
					// #ifdef MP-WEIXIN
					uni.navigateToMiniProgram({
						appId: "wxa24e8be702187e32",
						success(res) {
							// 打开成功
						},
						fail(res) {
							console.log(res)
						}
					})
					// #endif
					// #ifdef MP-QQ
					uni.navigateToMiniProgram({
						appId: "1112143742",

						success(res) {
							// 打开成功
						},
						fail(res) {
							console.log(res)
						}
					})
					// #endif
					return false;
				}
				if (e.detail.index == 2) {
					uni.navigateToMiniProgram({
						appId: "wxe9f93a7fecec7957",
						path: "pages/index2/index2",

						success(res) {
							// 打开成功
						}
					})
					return false;
				}

				const path = this.list[e.detail.index].path
				console.log(path)
				uni.navigateTo({
					url: path,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			change(e) {


				const path = this.gridList[e.detail.index].path
				console.log(path)
				uni.navigateTo({
					url: path,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			/**
			 * banner加载后触发的回调
			 */
			onqueryload(data) {},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			/**
			 * 点击banner的处理
			 */
			clickBannerItem(item) {
				// 有外部链接-跳转url
				if (item.open_url) {
					uni.navigateTo({
						url: '/pages/common/webview/webview?url=' + item.open_url + '&title=' + item.title,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				// 其余业务处理
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */

	/* #ifdef APP-NVUE */
	.warp {
		background-color: #fff;
	}

	/* #endif */

	.example-body {
		flex-direction: column;
		padding: 10px;
		background-color: #ffffff;
	}

	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.banner-image {
		width: 750rpx;
		height: 400rpx;
	}

	.swiper-box {
		height: 400rpx;
	}

	.search-icons {
		padding: 16rpx;
	}

	.search-container-bar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	/* #ifndef APP-NVUE || VUE3*/
	/deep/
	/* #endif */
	.uni-searchbar__box {
		border-width: 0;
	}

	/* #ifndef APP-NVUE || VUE3 */
	/deep/
	/* #endif */
	.uni-input-placeholder {
		font-size: 28rpx;
	}
</style>
